<template>
  <div class="my-sc">
    <div class="sc-item" v-for="(item,index) in collects" :key="index">
      <video-item
        :src="item.coverPhoto"
        :title="item.title"
        :detail="item.detail"
        :id="item.id"
        :up="item.userName"
      ></video-item>
      <div class="time">{{item.time}}</div>
      <el-collapse-transition>
        <div class="del">
          <ElButton type="danger" size="small" @click="del(item.id)">删除历史</ElButton>
        </div>
      </el-collapse-transition>
    </div>

    <div class="pagination">
      <ElPagination
        :total="totalRow"
        :current-page.sync="pageNumber"
        :page-size="8"
        @current-change="pageChange"
        hide-on-single-page
        background
      ></ElPagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "my-ls",
  data: function() {
    return {
      pageNumber: 1,
      pageSize: 8,
      totalRow: 0,
      collects: []
    };
  },
  methods: {
    pageChange() {
      this.getHistoryList();
    },
    getHistoryList() {
      this.axios
        .post("video/historyList", {
          id: this.$store.state.user.id,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          this.collects = res.data.page.list;
          this.totalRow = res.data.page.totalRow;
        });
    },
    del(id) {
      this.$confirm("此操作将永久删除收藏稿件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("video/delHistory", {
              userId: this.$store.state.user.id,
              videoId: id
            })
            .then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getHistoryList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted: function() {
    this.getHistoryList();
  }
};
</script>

<style lang="scss" scoped>
.my-sc {
  .sc-item {
    position: relative;
    &:hover {
      .del {
        display: block;
      }
    }
    .del {
      position: absolute;
      right: 40px;
      top: 10px;
      display: none;
    }
    .time{
        position:absolute;
        z-index: 999;
        left: 400px;
        top:5px;
        font-size: 20px;
        color: rgb(164, 202, 233);
    }
  }
}
.pagination {
  margin-top: 20px;
}
</style>